<script setup>


import {Refresh, Search} from "@element-plus/icons-vue";
import {ElLoading, ElMessageBox, ElTable} from "element-plus";
import {onMounted, ref} from "vue";

let tableData = ref([])
import axios from "axios";

const fromLabelWidth = '140px';

let form = ref({
  questionId: '',
  title: '',
  consultantId: '',
  publishTime: null,
  courseId: '',
})


//   显示全部
const testGet = () => {
  axios.get("/coursequestion")
      .then(resp => {
        tableData.value = resp.data.data;
      })
      .catch((err) => {
        console.log(err);
      })
}

///添加
const FormVisible = ref(false);

const testPost = () => {
  axios.post("/coursequestion", form.value)
      .then(resp => {
        console.log(resp.data);
        testGet();
      })
      .catch((err) => {
        console.log(err);
      })
  FormVisible.value = false;
}


//刷新
const shuaxin = () => {
  testGet();
}

//重置按钮
const openFullScreen2 = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  setTimeout(() => {
    loading.close()
  }, 500)
  shuaxin();
}

//搜索
let shoucangbianhao = ref();
const search = () => {
  axios.get("/coursequestion/id",
      {
        params: {
          questionId: shoucangbianhao.value,
        },
        header: {'Content-Type': 'multipart/form-data'}
      })
      .then(resp => {
        console.log(resp.data);
        tableData.value = [];
        tableData.value.push(resp.data.data);
      })
      .catch((err) => {
        console.log(err);
      })
}

//删除
const testDelete = (row) => {
  console.log("Delete.....")
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    axios.delete("/coursequestion", {
      params: {questionId: row.questionId}
    })
        .then(resp => {
          console.log(resp);
          testGet();
        })
        .catch(err => {
          console.log(err);
        })
  }).catch(() => {
    console.log('取消删除');
  })
}


//修改
const dialogFormVisible = ref(false);
const xiugaitanchukuang = (row) => {
  form.value = {...row}; // 将行数据复制到表单中
  dialogFormVisible.value = true; // 显示对话框
};

const testPut = () => {
  console.log("Put.....")
  axios.put("/coursequestion", {
    questionId: form.value.questionId,
    title: form.value.title,
    consultantId: form.value.consultantId,
    publishTime: null,
    courseId: form.value.courseId,

  }, {
    headers: {"Content-Type": "multipart/form-data"}
  })
      .then(resp => {
        console.log(resp);
        testGet();
        console.log("-------------------");
      })
      .catch(err => {
        console.log(err);
      })
  dialogFormVisible.value = false
}


onMounted(testGet);
</script>

<template>
  <div class="top">
    <div>
      课程收藏
      <div>
        回复编号
        <el-input v-model="shoucangbianhao" style="width: 240px" placeholder="请输入问题编号"/>
        <el-button type="primary" style="margin-left: 20px" @click="search" :icon="Search">搜索</el-button>
        <el-button type="warning" style="margin-left: 20px" @click="shuaxin" :icon="Refresh">重置</el-button>
      </div>
    </div>
    <div class="title">
      <el-button type="primary" @click="FormVisible = true">添加收藏</el-button>
    </div>
    <el-button class="shuaxin" type="primary" @click="openFullScreen2">点击刷新</el-button>
    <!--  显示全部数据-->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"/>
        <el-table-column property="questionId" label="问题编号" width="160"/>
        <el-table-column property="title" label="问题题目" width="160"/>
        <el-table-column property="consultantId" label="咨询师编号" width="160"/>
        <el-table-column property="publishTime" label="发布时间" width="280"/>
        <el-table-column property="courseId" label="课程编号" width="120"/>
        <el-table-column prop="scope" label="操作" width="220">
          <!--          插槽:修改和删除按钮-->
          <template #default="scope">
            <el-button type="primary" size="small" @click="xiugaitanchukuang(scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="testDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <!--  修改全部字段-->
  <el-dialog v-model="dialogFormVisible" title="修改回复" width="500">
    <el-form :model="form">
      <el-form-item label="问题编号" :label-width="fromLabelWidth">
        <el-input v-model="form.questionId" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="问题题目" :label-width="fromLabelWidth">
        <el-input v-model="form.title" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="咨询师编号" :label-width="fromLabelWidth">
        <el-input v-model="form.consultantId" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="发布时间" :label-width="fromLabelWidth">
        <el-input v-model="form.publishTime" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="课程编号" :label-width="fromLabelWidth">
        <el-input v-model="form.courseId" autocomplete="off"/>
      </el-form-item>
      <!--  确认对话框-->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="testPut">确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!--  添加回复弹框-->
  <el-dialog v-model="FormVisible" title="添加问题" width="400">
    <el-form :model="form">
      <el-form-item label=" 问题编号" :label-width="fromLabelWidth">
        <el-input autocomplete="off" placeholder="id自动生成"/>
      </el-form-item>
      <el-form-item label=" 问题题目" :label-width="fromLabelWidth">
        <el-input v-model="form.title" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="咨询师编号 " :label-width="fromLabelWidth">
        <el-input v-model="form.consultantId" autocomplete="off"/>
      </el-form-item>
      <!--      <el-form-item label="发布时间" :label-width="fromLabelWidth">-->
      <!--        <el-input v-model="form.value.publishTime" autocomplete="off"/>-->
      <!--      </el-form-item>-->
      <el-form-item label="课程编号 " :label-width="fromLabelWidth">
        <el-input v-model="form.courseId" autocomplete="off"/>

      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="FormVisible = false">取消</el-button>
        <el-button type="primary" @click="testPost()">确认</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
.title {
  display: inline-block;
  margin-right: 30px;
}
</style>